<template>
	<view class="collect">
		<view class="time_collect">
			<!-- 筛选条件 -->
			<view class="collect-tab">
				<view class="pre_list">
					<picker v-if="false" @change="changeStore" :range="storeList" :range-key="'storeName'" :value="storeIndex">
						<view class="form_right">
							<view style="margin-right:15rpx">
								{{storeList[storeIndex] ? storeList[storeIndex].storeName : '点击选择'}}</view>
							<view class="iconfont icon-down-arrow"></view>
						</view>
					</picker>
					<view class="rightlist">
						<view class="libox">
							<picker :range="typeList" :value="typeIndex" @change="changeType">
								<view class="form_right">
									<view style="margin-right:15rpx">
										{{typeList[typeIndex] ? typeList[typeIndex] : '点击选择'}}</view>
									<view class="iconfont icon-down-arrow"></view>
								</view>
							</picker>
						</view>
						<view class="libox">
							<picker mode="date" fields="year" @change="changeTypeyear" v-if="typeIndex == 0">
								<view class="form_right">
									<view style="margin-right:15rpx">{{typeYear ? typeYear+'年' : '点击选择'}}</view>
									<view class="iconfont icon-down-arrow"></view>
								</view>
							</picker>
						</view>
						<view class="libox">
							<picker mode="date" fields="month" @change="changeDataTime" v-if="typeIndex == 1">
								<view class="form_right">
									<view style="margin-right:15rpx">{{dataTime ? dataTime : '点击选择'}}</view>
									<view class="iconfont icon-down-arrow"></view>
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>

			<!-- 数据 -->
			<view class="achievement_footer">
				<view class="footer_table">
					<view class="table_time">
						<view class="item_title">分店</view>
						<view class="time_item" v-for="(item,index) in list" :key="index">
							<view>{{item.storeName}}</view>
						</view>
					</view>
					<scroll-view scroll-x="true" class="scroll">
						<view class="con_title">
							<view class="title_head">收现业绩</view>
							<view class="title_head">项目消耗</view>
							<view class="title_head">产品消耗</view>
							<view class="title_head">总实耗</view>
							<view class="title_head">人头</view>
							<view class="title_head">人次</view>
							<view class="title_head">新客户</view>
						</view>
						<view class="con_content">
							<view class="content_item" v-for="(item,index) in list" :key="index">
								<view class="con_data">{{item.salesAmount}}</view>
								<view class="con_data">{{item.projectConsume}}</view>
								<view class="con_data">{{item.productConsume}}</view>
								<view class="con_data">{{item.totalConsume}}</view>
								<view class="con_data">{{item.memberFlow}}</view>
								<view class="con_data">{{item.memberTimes}}</view>
								<view class="con_data">{{item.newMemberCount}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="body_head">
				<view class="con_title" style="background-color: #fff;padding: 10px;">▎全店收现消耗分析</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="chart1opts" :chartData="chartData1" :canvas2d="true"
				 	:ontouch="true" />
				</view>
			</view>
			<view class="body_head">
				<view class="con_title" style="background-color: #fff;padding: 10px;">▎新客分析</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="chart2opts" :chartData="chartData2" :canvas2d="true"
						:ontouch="true" />
				</view>
			</view>
			<view class="body_head">
				<view class="con_title" style="background-color: #fff;padding: 10px;">▎分店销售比较</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="chart3opts" :chartData="chartData3" :canvas2d="true"
						:ontouch="true" />
				</view>
			</view>
			<view class="body_head">
				<view class="con_title" style="background-color: #fff;padding: 10px;">▎分店消耗比较</view>
				<view class="charts-box">
					<qiun-data-charts type="line" :opts="chart4opts" :chartData="chartData4" :canvas2d="true"
						:ontouch="true" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		netOrgMasterData
	} from '@/api/index.js'
	import {
		getNowData
	} from '@/util/weekTime.js'
	import {
		getCurrentMonthDay
	} from '@/util/util.js'
	import {
		getAppCtx,
		netGetChainStoreList
	} from '@/api/login.js'
	export default {
		data() {
			return {
				appCtx: {},
				storeList: [],
				people_show: false,
				time_show: false,
				storeIndex: 0,
				dateyear: '', //年
				dataTime: '',
				tableFrom: {
					storeid: '',
				},
				list: [],
				//本人及下属   按年还是按月 筛选
				typeList: ['按年', '按月'],
				typeIndex: 0,
				typeYear: '',

				chartData1: {},
				chart1opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					dataLabel: true, //是否显示顶部提示
					xAxis: {
						disableGrid: true,
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
					 line: { 
							type: "curve",
							width: 2
						}
					}
				},
				chartData2: {},
				chart2opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					dataLabel: true, //是否显示顶部提示
					xAxis: {
						disableGrid: true,
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
					 line: {
							type: "curve",
							width: 2
						}
					}
				},
				chartData3: {},
				chart3opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					dataLabel: true, //是否显示顶部提示
					xAxis: {
					 disableGrid: true,
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
						scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
					 gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				},
				chartData4: {},
				chart4opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true,
					dataLabel: true, //是否显示顶部提示
					xAxis: {
						disableGrid: true,
						itemCount: 5, //x轴单屏显示数据的数量，默认为5个
						scrollShow: true, //新增是否显示滚动条，默认false
						scrollAlign: 'left', //滚动条初始位置
						scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
					 scrollColor: '#DEE7F7', //默认为 #A6A6A6
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2
						}
					}
				}
			}
		},
		onShow() {
			let date = new Date()
			let year = date.getFullYear()
			this.dateyear = year
			this.typeYear = year

			this.dataTime = getNowData().substr(0, 7)
			// if(this.storeIndex == 0) {
			// 	this.getData()
			// }else{
			// 	this.getData()
			// }
			console.log("==========")
			this.appCtx = getAppCtx()
			setTimeout(() => {
				this.getStoreList()
			}, 300);
		},
		methods: {
			// 商户分类；
			getStoreList() {

				const data = {
					storeName: '全部',
					storeId: ''
				}
				netGetChainStoreList({
					type: 'all'
				}).then(res => {
					this.storeList = res.data
					this.getData()
				})

			},

			changeStore(e) {
				this.storeIndex = e.detail.value
				this.tableFrom.storeid = this.storeList[e.detail.value].id
				this.getData()
			},
			changeYear(e) {
				this.dateyear = e.detail.value
				this.getData()
			},
			getData() {
				
				let _this = this
				let params = {
					date: this.typeIndex == 0 ? this.typeYear : this.dataTime
				}
				netOrgMasterData(params).then(res => {
					
					res = res.data
					this.list = res.retObj.objs

					let storeMonthMap = res["storeMonthMap"];
					let month = []
					for (let storeId in storeMonthMap) {
						console.log("key:" + storeId + "  value:" + storeMonthMap[storeId])
						if (storeMonthMap[storeId].length > month.length) { //获取最大跨度的分店月份
							storeMonthMap[storeId].forEach((ele, index) => {
								month.push(ele.orderMonth)
							})
						}
					}

					var storeMap = {}

					_this.storeList.forEach((ele, index) => {
						let sid = ele.storeId + "";
						let name = ele.storeName + "";
						var zeroArr = null;
						if (!storeMonthMap[sid] || storeMonthMap[sid].length <= 0) {
							zeroArr = new Array(month.length).fill(0);
							storeMap[sid] = {
								sid: sid,
								name: name,
								salesArr: zeroArr,
								consumeArr: zeroArr,
							}
						} else {
							let storeMonthData = storeMonthMap[sid]
							let storeMonthDataMap = {}
							storeMonthData.forEach((ele, index) => {
								storeMonthDataMap[ele.orderMonth] = ele
							})

							let saleArr = new Array(month.length).fill(0);
							let consumeArr = new Array(month.length).fill(0);
							month.forEach((ele, index) => {
								if (storeMonthDataMap[ele]) {
									saleArr[index] = storeMonthDataMap[ele].salesAmount
									consumeArr[index] = storeMonthDataMap[ele].totalConsume
								}
							})
							storeMap[sid] = {
								sid: sid,
								name: name,
								salesArr: saleArr,
								consumeArr: consumeArr,
							}
						}

					})

				   let storeMonthSumDataMap = {}
			       month.forEach((mon,index)=>{
			    	      let monthAllStore = { "salesAmount": 0, "totalConsume" : 0, "newMemberCount" : 0}

					      for (var key in storeMonthMap) {
							 if(storeMonthMap[key]) {
								 storeMonthMap[key].forEach((amonthObj,index)=>{
									 if(amonthObj["orderMonth"] == mon) {
										 monthAllStore["salesAmount"] = amonthObj.salesAmount + monthAllStore["salesAmount"]
										 monthAllStore["totalConsume"] = amonthObj.totalConsume + monthAllStore["totalConsume"]
										 monthAllStore["newMemberCount"] = amonthObj.newMemberCount + monthAllStore["newMemberCount"]
									 }
								  })
							 }
					    	  
					      } 
						  storeMonthSumDataMap[mon] = monthAllStore
					  })
				  
			  	 if(storeMonthSumDataMap) {
					 _this.getChart1Data(month, storeMonthSumDataMap)
					 _this.getChart2Data(month, storeMonthSumDataMap)
					 _this.getChart3Data(month, storeMap)
			  	 }
				})
			},
			changePeople(e) {
				this.storeIndex = e.detail.value
				if (this.storeIndex == 0) {
					this.getData()
				} else {
					this.getData()
				}
			},
			changeDataTime(e) {
				this.dataTime = e.detail.value
				this.getData()
			},
			handleTime(time) {
				let year = time.slice(0, time.indexOf('-'))
				let month = time.slice(time.indexOf('-') + 1)
				let obj = getCurrentMonthDay(year, month)
				return obj
			},
			//本人及  下属  按年 还是按月  筛选
			changeType(e) {
				this.typeIndex = e.detail.value
				this.getData()
			},
			changeTypeyear(e) {
				this.typeYear = e.detail.value
				this.getData()
			},
			getChart1Data(month, currentStoreData) {
				let x1 = []
			    let x2 = [] 
			    for (var key in currentStoreData) {
						x1.push(currentStoreData[key].salesAmount)
						x2.push(currentStoreData[key].totalConsume)
				  } 
				this.chartData1 = {
					categories: month,
					series: [{
							name: "收现",
							data: x1
						},
						{
							name: "实耗",
							data: x2
						}
					]
				};
			},
			getChart2Data(month, currentStoreData) {
				 var that = this; 
				  let x1 = []
	
				  for (var key in currentStoreData) {
							x1.push(currentStoreData[key].newMemberCount)
					  } 
				  
				this.chartData2 = {
					categories: month,
					series: [{
							name: "新客数",
							data: x1
						} 
					]
				};
			},
			getChart3Data(month, storeMap) { 
				 var that = this;  
 
			  var Y31 = []
			  var Y41 = []
			  for (var key in storeMap) {
				  Y31.push({
								name: storeMap[key]["name"],
								data: storeMap[key]["salesArr"],
							  })
				  Y41.push({
						name: storeMap[key]["name"],
						data: storeMap[key]["consumeArr"],
					  })
			  } 
				 
				this.chartData3 = {
					categories: month,
					series: Y31
				};
				this.chartData4 = {
					categories: month,
					series: Y41
				};
			}, 
		},
		components: {
		},
		onReady() {

		}
	}
</script>

<style scoped lang="scss">
	.charts-box {
		width: 100%;
		height: 300px;
		background: #fff;
	}

	.collect-tab {
		background: #fff;

		.pre_list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;

			.pre_title {
				font-size: 28rpx;
				font-weight: 700;
			}

			.form_right {
				// width:220rpx;
				height: 40rpx;
				font-size: 24rpx;
				color: #333;
				text-align: center;
				line-height: 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.rightlist {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.libox {
					margin-left: 24rpx;
				}
			}
		}
	}

	.collect {

		.time_collect,
		.people_collect {
			.line_header {
				background-color: #fff;

				.scroll {
					white-space: nowrap;
					width: 750rpx;
					overflow: hidden;

					.line_chart {
						height: 600rpx;
						width: 2000rpx;
					}
				}
			}

			.achievement_body {
				margin: 30rpx;

				.achievement_title {
					border-radius: 10rpx;
					padding: 20rpx 0 40rpx;
					background-color: #fff;
					display: flex;
					text-align: center;

					.title_item {
						width: 33.33%;

						:first-child {
							padding: 20rpx;
							color: #ccc;
						}
					}
				}
			}

			.achievement_footer {
				margin: 20rpx 0 30rpx;
				overflow: hidden;

				.footer_table {
					display: flex;

					.table_time {
						width: 150rpx;
						white-space: nowrap;

						.item_title {
							padding-left: 20rpx;
							font-weight: 700;
							height: 90rpx;
							line-height: 90rpx;
							border: 1rpx solid #f2f2f2;
							border-right: 0;
						}

						.time_item {
							padding-left: 20rpx;
							height: 90rpx;
							line-height: 90rpx;
							background-color: #fff;
							border-bottom: 1rpx solid #EAEAEA;

						}
					}

					.scroll {
						white-space: nowrap;
						width: 600rpx;
						overflow: hidden;

						.con_title {
							.title_head {
								display: inline-block;
								width: 200rpx;
								height: 90rpx;
								line-height: 90rpx;
								text-align: center;
								border-top: 1rpx solid #f2f2f2;
								border-bottom: 1rpx solid #f2f2f2;
							}

							:last-child {
								border-right: 1rpx solid #f2f2f2;
							}
						}

						.con_content {
							.content_item {
								.con_data {
									display: inline-block;
									width: 200rpx;
									height: 90rpx;
									line-height: 90rpx;
									text-align: center;
									background-color: #fff;
									border-bottom: 1rpx solid #EAEAEA;
								}
							}
						}
					}
				}
			}
		}

		.pagination_demo {
			background-color: #fff;
			padding: 30rpx 60rpx;
			margin: 0 30rpx;
		}

		.van_po {
			position: absolute;

			.screen_con {
				z-index: 9999;
				background-color: #fff;

				.screen_title {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 20rpx 20rpx 24rpx;
					border-bottom: 1rpx solid #EAEAEA;

					:first-child {
						font-size: 28rpx;
						font-weight: 700;
					}
				}

				.screen_style {
					.style_title {
						padding-left: 24rpx;
						padding-top: 30rpx;
					}

					.style_con {
						display: flex;
						width: 560rpx;
						flex-wrap: wrap;
						text-align: center;
						padding-left: 9rpx;

						.style_item {
							width: 150rpx;
							height: 60rpx;
							line-height: 60rpx;
							border: 1rpx solid #f4f4f4;
							margin: 15rpx 15rpx;
							color: #b6b6b6;
						}

						.type_active,
						.time_active {
							border: 1rpx solid #52c1f5;
							color: #52c1f5;
						}
					}



					.aff_con {
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
						padding-top: 30rpx;

						.aff_item {
							width: 25%;

							.aff_img {
								margin-bottom: 15rpx;
								margin-left: 44rpx;
								width: 50rpx;
								height: 50rpx;
							}
						}

						.aff_last {
							.aff_img {
								margin-bottom: 15rpx;
								margin-left: 30rpx;
								width: 80rpx;
								height: 50rpx;
							}
						}
					}
				}

				.style_input {
					margin: 20rpx;
					border: 1rpx solid #EAEAEA;
					padding-left: 24rpx;
					width: 600rpx;

					input {
						display: inline-block;
						height: 80rpx;
					}
				}
			}
		}

		.button_bottom {
			display: flex;
			position: fixed;
			width: 100%;
			bottom: 0;
			right: 0;
			left: 0;
			font-size: 32rpx;
			height: 90rpx;
			text-align: center;

			.reset {
				flex: 1;
				line-height: 90rpx;
				color: #1e89fe;
			}

			.sure {
				flex: 1;
				line-height: 90rpx;
				background-color: #03aa96;
				color: #fff;
			}

		}
	}
</style>
